<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
    </style>
</head>
<body>
    <div class="box"></div>
</body>
<script>

    class Drag{
        constructor(){
            this.ele = document.querySelector(".box");

            this.m = this.move.bind(this);
            this.u = this.up.bind(this);

            this.addEvent();
        }
        addEvent(){
            this.ele.addEventListener("mousedown", this.down.bind(this));
        }
        down(eve){
            this.downE = eve || window.event;
            document.addEventListener("mousemove",this.m);
            document.addEventListener("mouseup",this.u);
        }
        move(eve){
            this.moveE = eve || window.event;
            this.ele.style.left = this.moveE.clientX - this.downE.offsetX + "px";
            this.ele.style.top = this.moveE.clientY - this.downE.offsetY + "px";

            // 将位置存储到storage技术内
            var pos = {
                x:this.ele.offsetLeft,
                y:this.ele.offsetTop
            }
            localStorage.setItem("pos",JSON.stringify(pos));
        }
        up(){
            document.removeEventListener("mousemove", this.m);
            document.removeEventListener("mouseup", this.u);
        }
    }

    new Drag;

</script>
</html>